<template>
  <div>
    <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>IDC</el-breadcrumb-item>
          <el-breadcrumb-item>物理机资源使用情况</el-breadcrumb-item>
        </el-breadcrumb>
    </el-row>

    <el-card class="box-card">
      <!-- HPC信息区域 -->
      <el-row :gutter="10">
        <el-col :span="3">
            <el-select placeholder="选择筛选条件" v-model="searchCondition">
                <el-option value="person" label="项目负责人">项目负责人</el-option>
                <el-option value="time" label="时间">时间</el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-input :placeholder="placeholder" v-model="name" :clearable="true" @clear="clearCheck" v-if="searchCondition == 'person'">
                <el-button slot="append" icon="el-icon-search" @click="checkName"></el-button>
            </el-input>
            <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" v-if="searchCondition == 'time'"
                                end-placeholder="结束日期" :unlink-panels='true' value-format="yyyy-MM-dd HH:mm:ss" 
                                @change="changeTime" style="width: 97%;">
                </el-date-picker>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="addProject">添加项目</el-button>
        </el-col>
        <el-col :span="1" :push="4">
            <el-button type="primary" @click="exportTemplate">模板</el-button>
        </el-col>
        <el-col :span="1" :push="5">
          <el-upload class="upload-demo" action="http://222.240.49.66:11501/api/project/importExecl" 
                    :on-success="uploadFile" :show-file-list='false'>
            <el-button type="primary">导入</el-button>
          </el-upload>
        </el-col>
        <el-col :span="1" :push="6">
            <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-col>
        <el-col :span="2" :push="7">
            <el-button type="danger" @click="removeVisible = true">批量删除</el-button>
        </el-col>
	    </el-row>

    <el-table :data="hpclist" :border='false' stripe @selection-change="selsChange"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="项目负责人" show-overflow-tooltip>
            <template slot-scope="scope">
                <div>{{scope.row.person}}</div>
            </template>
        </el-table-column>
        <el-table-column label="项目名称">
            <template slot-scope="scope">
                <div>{{scope.row.name}}</div>
            </template>
        </el-table-column>
        <el-table-column label="对方单位">
            <template slot-scope="scope">
                <div>{{scope.row.company}}</div>
            </template>
        </el-table-column>
        <el-table-column label="开始时间">
            <template slot-scope="scope">
                <div>{{scope.row.beginTime | dateFormat}}</div>
            </template>
        </el-table-column>
        <el-table-column label="结束时间">
            <template slot-scope="scope">
                <div>{{scope.row.endTime | dateFormat}}</div>
            </template>
        </el-table-column>
        <el-table-column label="资源配置">
            <template slot-scope="scope">
                <div>{{scope.row.resourceType}}</div>
            </template>
        </el-table-column>
        <el-table-column label="收费标准">
            <template slot-scope="scope">
                <div>{{scope.row.cost}}</div>
            </template>
        </el-table-column>
        <el-table-column label="资源数量">
            <template slot-scope="scope">
                <div>{{scope.row.resourceCount}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
                <el-button type="primary" size="small" plain @click="modify(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
      <el-pagination :current-page="pageInfo.pagenum" :page-sizes="[10]" :page-size="pageInfo.pagesize" :total ="pageInfo.totalCount"
			        @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" background >
			</el-pagination>
    </el-card>

    <add-uhr ref="AddUhr" @fetchData="getList"></add-uhr>
    <modify-uhr ref="ModifyUhr" :message="tableInfo" @fetchData="getList"></modify-uhr>

    <el-dialog title="提示" :visible.sync="removeVisible" width="30%">
        <span>确定删除吗？</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="removeVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import AddUhr from './components/AddUhr';
import ModifyUhr from './components/ModifyUhr';
export default {
  data() {
    return {
      activeName: '1',
      pageInfo: {
        currPage: 0,
        pageSize: 0,
        totalCount: 0,
        totalPage: 0
      },
      queryInfo: {
        limit: 10,
        page: 1,
        person: '',
        beginTime: null,
        endTime: null
      },
      hpclist: [],
      name: '',
      time: '',
      total: 0,
      tableData: [],
      tableInfo: {},
      sels: [],
      searchCondition: 'person',
      placeholder: '请输入项目负责人',
      removeVisible: false
    };
  },
  created() {
      this.getList();
  },
  components: {
    AddUhr,
    ModifyUhr
  },
  watch: {
      time() {
          this.queryInfo.beginTime = this.time[0]
          this.queryInfo.endTime = this.time[1]
      },
      searchCondition() {
        if(this.searchCondition == 'person'){
          this.queryInfo.beginTime = null
          this.queryInfo.endTime = null
          this.time = ''
          this.getList()
        }else{
          this.queryInfo.person = ''
          this.getList()
        }
      }
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    addProject(){
        this.$refs['AddUhr'].show();
    },
    async getList() {
      const { data: res } = await this.$http.get("project/list", {params: this.queryInfo});
      if (res.code !== 200) {
        return this.$message.error("获取数据失败！");
      }
      this.total = res.data.totalPage;
      this.pageInfo.currPage = res.data.currPage;
      this.pageInfo.pageSize = res.data.pageSize;
      this.pageInfo.totalCount = res.data.totalCount;
      this.pageInfo.totalPage = res.data.totalPage;
      this.hpclist = res.data.list;

      console.log(this.hpclist);
    },
    async modify(row) {
        const { data: res } = await this.$http.get(`project/${row.id}`);
            if (res.code !== 200) {
                return this.$message.error("获取数据失败！");
            }
            console.log('tet', res);
            this.tableInfo = res
        this.$refs['ModifyUhr'].show();
    },
    checkName() {
      if(this.searchCondition == 'person'){
              this.queryInfo.person = this.name
          }
      this.getList()
    },
    changeTime(){
      this.getList()
    },
    clearCheck() {
      this.queryInfo.person = ''
      this.getList()
    },
    handleCurrentChange(newPage) {
		  this.queryInfo.page = newPage
		  this.getList()
	  },
    selsChange(sels) { 
    this.sels = sels;
    },
    async remove(row) {
      let ids = [];
      row.forEach(element => {
        ids.push(element.id)
      });
      const { data: res } = await this.$http.delete("project", {data:ids});
      if (res.code !== 200) {
        return this.$message.error("操作失败！");
      }
      this.getList()
    },
    uploadFile() {
      this.$message.success("上传成功")
      this.getList()
    },
    exportExcel() {
      window.open('http://222.240.49.66:11501/api/project/export','数据')
    },
    exportTemplate() {
      window.open('http://222.240.49.66:11501/api/project/template','数据')
    },
    removeConfirm() {
        this.remove(this.sels)
        this.removeVisible = false
    }
  },
  filters: {
    dateFormat (val) {
      if (val == null || val == '') {
        return ''
      } else {
        let d = new Date(val)
        let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
        let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
        let times = d.getFullYear() + '/' + month + '/' + day
        return times
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>